<template>
    <div class="user-manage">
      <el-card>
        <div slot="header">
          <span>角色管理</span>
          <el-button type="primary" style="float: right">新增用户</el-button>
        </div>
        
        <el-table :data="userList" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="role" label="角色"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'UserManage',
    data() {
      return {
        userList: [
          { id: 1, name: '张三-role', email: 'zhangsan@example.com', role: '管理员' },
          { id: 2, name: '李四-role', email: 'lisi@example.com', role: '用户' },
          { id: 3, name: '王五-role', email: 'wangwu@example.com', role: '用户' }
        ]
      }
    }
  }
  </script>